<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="/static/css/easyui.css">
	<link rel="stylesheet" type="text/css" href="/static/css/icon.css">
	<link rel="stylesheet" type="text/css" href="/static/css/demo.css">
	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 数据表格 -->
<table id="dg" title="商品列表" class="easyui-datagrid" style="width: 100%;height:100%"
       data-options="
                singleSelect: true,
                toolbar: '#tb',
                url: '/manage/product/list.do',
                method: 'post',
                pagination:true,
                pageSize: 5,
                pageList: [5, 10, 15, 20],
                striped: true,
                nowap: true,
                border: false,
                idField: 'id',
                sortName: 'price',
                sortOrder: 'desc',
                rownumbers: 'true',
                onDblClickRow: onDblClickRow,
                onEndEdit: onEndEdit
            ">
    <thead>
    <tr>
        <th field="id" width="5%">商品ID</th>
        <th field="name" width="5%" editor="{type:'validatebox',options:{required:true}}">商品名称</th>
        <th field="price" width="5%" sortable="true" editor="{type:'validatebox',options:{required:true}}">商品价格</th>
        <th field="stock" width="10%" sortable="true" editor="{type:'validatebox',options:{required:true}}">库存</th>
        <th field="subtitle" width="10%" editor="{type:'validatebox',options:{required:true}}">描述</th>
        <th field="categoryId" width="10%" editor="{type:'combobox',options:{required:true}}">类目</th>
        <th field="status" width="10%" editor="{type:'combobox',options:{required:true}}">状态</th>
        <th field="createTime" sortable="true" width="10%">创建时间</th>
        <th field="updateTime" sortable="true" width="10%">修改时间</th>
        <th field="updateTime" sortable="true" width="10%">修改时间</th>
        <th field="updateTime" sortable="true" width="10%">修改时间</th>
        <th field="updateTime" sortable="true" width="10%">修改时间</th>

    </tr>
    </thead>
</table>
<!-- 工具栏 -->
<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="save()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<!-- 添加商品对话框 -->
<div id="dlg" class="easyui-dialog" style="height: 500px;width: 500px;padding: 10px" closed="true"
     data-options="buttons: '#dlg-buttons'">
    <div>
        <form id="fm" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" label="商品名称:" labelPosition="top" data-options="prompt:'请输入商品名称',validType:'length[1,20]',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input  class="easyui-numberbox" name="price" label="价格:" labelPosition="top" min="0.1" max="10000.00" precision="2" required="true">
            </div>
            <div style="margin-bottom:20px">
                <input  class="easyui-numberbox" name="stock" label="库存:" labelPosition="top" min="0" max="10000">
            </div>
            <div style="margin-bottom:20px">
                <input  class="easyui-numberbox" name="status" label="状态:" labelPosition="top" min="0" max="10000">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="categoryId" label="类目" labelPosition="top" required="true">
                    <option>请选择类目</option>
                    <option value="100001">家用电器</option>
                    <option value="100002">数码3C</option>
                    <option value="100003">服装箱包</option>
                    <option value="100004">食品生鲜</option>
                    <option value="100005">酒水饮料</option>
                </select>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="subtitle" label="描述:" labelPosition="top" data-options="validType:'length[0,300]',multiline:true">
            </div>

    </form>
    </div>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="addGood()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

</body>
<script type="text/javascript">
    //服务端返回码
    var code = {
        add_success: 100,//添加成功
        add_error: 101,//添加失败

        del_success: 200,//删除成功
        del_error: 201,//删除失败

        update_success: 300,
        update_error: 301,

        unkonw_error:-1//未知异常
    };
    var datagrid = $("#dg");
    var editRow = undefined; //定义全局变量：当前编辑的行
    function addGood(){
        $('#fm').form('submit', {//调用form表单的submit
            url: '/manage/product/save.do',
            success: function (result) {
                if (result.code == code.add_error) {//如何返回错误code
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg //显示错误信息
                    });
                } else {
                    $('#dlg').dialog('close'); // 成功就关闭对话框
                    $('#dg').datagrid('reload'); // 然后重新加载页面
                    $.messager.show({
                        title: 'Success',
                        msg: result.msg //显示信息
                    });
                }
            }
        });
    }

    function add(){
        $('#dlg').dialog('open')
    }

    //保存
    function save(){
        if(editRow!=undefined){
            datagrid.datagrid("endEdit",editRow);
        }
    }
    //删除行
    function removeit(){
        $.messager.confirm("删除","是否删除该行",function(r){
            if(r){
                var row = datagrid.datagrid("getSelected");
                $.post("/yhd/goods/"+row.gid+"/delete",function(result){
                    if (result.code==code.del_success){//如果返回成功code
                        $('#dg').datagrid('reload');    // 刷新页面
                        //下面是不刷新页面的写法
                        // editRow = datagrid.datagrid("getRowIndex", rows);
                        // datagrid.datagrid("cancelEdit",editRow).datagrid('deleteRow', editRow);
                        // editRow = undefined;
                        $.messager.show({
                            title: 'Success',
                            msg: result.msg // 显示错误信息
                        });
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg // 显示错误信息
                        });
                    }
                },"json");
            }
        });
    }
    //撤销
    function reject(){
        $('#dg').datagrid('rejectChanges');
        editRow = undefined;
    }

    //双击开启编辑行是触发该函数
    function onDblClickRow(rowIndex, rowData) {
        if (editRow != undefined) {//如果当前行处于编辑状态，则结束编辑
            datagrid.datagrid("endEdit", editRow);
        }
        if (editRow == undefined) {//如果当前行未处于编辑状态，则开始编辑
            datagrid.datagrid("beginEdit", rowIndex);
            editRow = rowIndex;
        }
    }
    //编辑结束时触发该函数
    function onEndEdit(rowIndex, rowData, changes){
        //发送修改请求 使用ajax发送json
        $.ajax({
            url:'/manage/product/update.do',
            type:'post',//json只能用post请求
            contentType:'application/json;charset=utf-8',//将json传递到后台需要写明请求数据的类型
            dataType:'json',//返回json类型

            data:JSON.stringify(rowData),//将json数据进行格式化
            success:function (result) {
                if (result.code == code.update_success) {//如果返回成功code
                    $('#dg').datagrid('reload');    // 刷新页面
                    $.messager.show({
                        title: "Success",
                        msg: result.msg+" "+result.data
                    });
                } else {
                    $.messager.show({
                        title: "Error",
                        msg: result.msg+" "+result.data
                    });
                }
            }
        });
        editRow = undefined;
    }
</script>
